<template>
    <TemplateTitle titleName="各厂能耗对比"></TemplateTitle>
    <div class="chart">
        <chart-line-bar :chartData="chartDataList" xAxisName="month" :option="option" :chartType="chartType"
            :twoYAxis="false" :unit="unit" :orient="'horizontal'"></chart-line-bar>
    </div>
</template>

<script setup>
import TemplateTitle from "@/components/common/TemplateTitle.vue"

import homeHttp from "@/https/home.js"
import { onMounted, ref } from "vue"
import ChartLineBar from "./charts/ChartLineBar.vue"

const chartDataList = ref([])
const option = ref({})
const chartType = ref([
    // {
    //     type: "line",
    //     code: "companyWaterYield",
    //     name: "总公司",
    //     linerColor: ["#e33dff", "#e33dff"],
    // },
    {
        type: "line",
        code: "xingshaPower",
        name: "星沙厂",
        linerColor: ["#e33dff", "#e33dff"],
    },
    {
        type: "line",
        code: "cityNorthPower",
        name: "城北厂",
        linerColor: ["#ffc550", "#ffc550"],
    },
    {
        type: "line",
        code: "citySouthPower",
        name: "城南厂",
        linerColor: ["#b2e3e8", "#b2e3e8"],
    },
    {
        type: "line",
        code: "cityWestPower",
        name: "城西厂",
        linerColor: ["#85cc18", "#85cc18"],
    },
])
const unit = ref(['单位:kwh/吨'])

onMounted(() => {
    queryPower()
})

const queryPower = () => {
    homeHttp.queryPower().then(res => {
        if (res.data.code == 200) {
            res.data.data.forEach((item) => {
                item.month = item.month + '月'
            })
            chartDataList.value = res.data.data
        }
    })
}
</script>

<style scoped></style>
